<!-- 热门品牌 -->
<script setup>
import { ref } from 'vue'
import { NCarousel, NSkeleton, NSpace } from 'naive-ui'
import Pannel from "@/components/home/home-panel.vue";
import { useLazyData } from '@/utils'
import { findBrand } from '@/api/category'

const homeBrand = ref(null)
const brand = useLazyData(homeBrand, findBrand, 10)

let currentIndex = ref(0)
const toggleIndex = (current) => {
  currentIndex.value = current
}


</script>

<template>
  <div ref="homeBrand" class="brands">
    <Transition>
      <div v-if="brand.length <= 0">
        <n-space justify="center">
          <n-skeleton height="306px" width="1240px" />
        </n-space>
      </div>
      <Pannel style="padding-bottom: 20px;" title="热门品牌" subTitle="国际经典 品质保证" v-else>
        <template #right>
          <div class="toggle-link">
            <a
              href="javascript:;"
              @click="toggleIndex(0)"
              :class="{ disabled: currentIndex == 0 }"
              class="iconfont icon-left"
            ></a>
            <a
              href="javascript:;"
              @click="toggleIndex(10)"
              :class="{ disabled: currentIndex == 10 }"
              class="iconfont icon-right"
            ></a>
          </div>
        </template>
        <n-carousel
          :current-index="currentIndex"
          :slides-per-view="5"
          :space-between="5"
          :loop="false"
          :touchable="false"
          :show-dots="false"
        >
          <img
            v-for="item in brand"
            :key="item.id"
            v-lazy="item.picture"
            class="carousel-img"
            :title="item.name"
          />
        </n-carousel>
      </Pannel>
    </Transition>
  </div>
</template>

<style lang='less' scoped>
.carousel-img {
  width: 300px;
  height: 350px;
}
.toggle-link {
  a {
    text-align: center;
    background-color: @xtxColor;
    padding: 4px;
    margin-left: 5px;
    color: #fff;
  }
}
.disabled {
  background-color: #ccc !important;
  cursor: not-allowed;
}
</style>